import { computed, ref, reactive, Ref, watch, inject } from 'vue'
import { Widget } from '@/models'
import { Viewer } from '@/types'

/** 控件错误展示 */
export default function useWidgetError(data: Ref<Widget>) {
  /** 合同控件 */
  const viewer = inject('Viewer') as Viewer

  /** 错误消息 */
  const errorMessage = computed(() => data.value.error || '')

  /** 是否存在错误信息 */
  const hasError = computed(() => !!errorMessage.value)

  /** 是否聚焦标记错误 */
  const isMarket = computed(() => hasError.value && viewer.errorWidgetId === data.value.id)

  /**
   * 是否手动触发错误
   * 填写控件使用中需要手动触发才显示错误消息
   */
  const isTrigger = computed(() => {
    const widget = data.value
    return widget.isUse && widget.isFill
  })

  /** 触发的校验信息 */
  const triggerMessage = ref('')

  /** 手动触发校验 */
  function trigger() {
    triggerMessage.value = errorMessage.value
  }

  /** 错误消息 */
  const message = computed(() => (isTrigger.value ? triggerMessage.value : errorMessage.value))

  /** 没有错误后清除手动校验和错误标记 */
  watch(errorMessage, val => {
    if (!val) {
      trigger()
      viewer.errorWidgetId === data.value.id && (viewer.errorWidgetId = '')
    }
  })

  /** 错误标记更改后触发校验 */
  watch(isMarket, () => trigger())

  return reactive({
    /** 是否聚焦标记错误 */
    isMarket,

    /** 错误消息 */
    message,

    /**
     * 是否直接显示错误信息
     * 1. 错误标记时
     * 2. 设置控件
     */
    visible: computed(() => !!message.value && (isMarket.value || data.value.isSet)),

    /** 手动触发校验 */
    trigger
  })
}
